<template>
    <div class="take-exam">
      <h1>参加考试</h1>
      <el-card>
        <div v-for="(question, index) in exam.questions" :key="question.id">
          <h3>第 {{ index + 1 }} 题: {{ question.content }}</h3>
          <el-radio-group v-model="answers[question.id]">
            <el-radio v-for="option in question.options" :key="option.id" :label="option.id">
              {{ option.content }}
            </el-radio>
          </el-radio-group>
        </div>
        <el-button type="primary" @click="submitExam">提交</el-button>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import api from '../api';
  import { ElMessage } from 'element-plus';
  
  const route = useRoute();
  const router = useRouter();
  const exam = ref({});
  const answers = ref({});
  
  onMounted(async () => {
    try {
      const response = await api.exams.getExamDetail(route.params.id);
      exam.value = response.data;
    } catch (error) {
      ElMessage.error('加载考试失败');
    }
  });
  
  const submitExam = async () => {
    try {
      await api.exams.submitExam(route.params.id, answers.value);
      ElMessage.success('提交成功');
      router.push('/scores');
    } catch (error) {
      ElMessage.error('提交失败');
    }
  };
  </script>
  
  <style scoped>
  .take-exam {
    padding: 20px;
  }
  </style>